<template>
	<div class="img-list">
		<div class="img-content" v-for="(item,key) in imageList" :key="key">
			<img :src="item.url">
			<div class="name">
				<div>{{ item.name }}</div>
				<el-button type="text" @click="handleFileName(item,key)">修改文件名</el-button>
			</div>
			<!-- 删除icon -->
			<div class="del">
				<i @click="handleFileRemove(item,key)" class="el-icon-delete"></i>
			</div>
			<!-- 放大icon -->
			<div class="layer" @click="handleFileEnlarge(item.url)">
				<i class="el-icon-view"></i>
			</div>
		</div>
		<div v-if="!pass && progress !== 0" class="img-content img-progress">
			<el-progress type="circle" :percentage="progress" :status="proStatus"></el-progress>
		</div>
		<div class="img-upload">
			<el-upload class="uploader" accept="image/*"
			  ref="upload"
        multiple
			  list-type="picture-card"
			  :show-file-list="false"
			  :action="action"
			  :data="dataForm"
			  :on-change="uploadOnChange"
			  :on-success="uploadOnSuccess"
			  :on-error="uploadOnError"
			  :on-progress="uploadOnProgress">
			  	<el-button type="primary">点击上传</el-button>
			</el-upload>
		</div>
		<el-dialog title="" :visible.sync="isEnlargeImage" size="large" :modal-append-to-body="false" top="8%" width="60%">
			<img @click="isEnlargeImage = false" style="width: 100%;" :src="enlargeImage">
		</el-dialog>
	</div>
</template>

<script>
export default {
  name: 'upload-image',
  props: {
    imageList: {
      type: Array,
      default () {
        return []
      }
    },
    linkTable: String,
    linkId: String,
    linkField: String
  },
  data () {
    return {
      progress: 0, // 上传进度
      pass: null, // 是否上传成功
      isEnlargeImage: false, // 放大图片
      enlargeImage: '', // 放大图片地址
      action: this.$http.requestUrl('/common/attachment/upload'),
      dataForm: {
        token: `${this.$cookie.get('token')}`,
        linkTable: this.linkTable,
        linkId: this.linkId,
        linkField: this.linkField
      }
    }
  },
  computed: {
    proStatus () {
      // 上传状态
      if (this.pass) {
        return 'success'
      } else if (this.pass === false) {
        return 'exception'
      } else {
        return ''
      }
    }
  },
  methods: {
    uploadOnProgress (e, file) {
      // 开始上传
      console.log(e.percent, file)
      this.progress = Math.floor(e.percent)
    },
    uploadOnChange (file) {
      if (file.status === 'ready') {
        console.log('ready')
        this.pass = null
        this.progress = 0
      } else if (file.status === 'fail') {
        this.$message.error('图片上传出错，请刷新重试！')
      }
    },
    uploadOnSuccess (e, file) {
      console.log(JSON.stringify(file))
      // 上传附件
      this.pass = true
      this.$message.success('上传成功')
      this.imageList.push({
        id: file.response.id,
        url: file.url,
        name: file.name.split('.')[0]
      })
    },
    uploadOnError (e, file) {
      console.log(e)
      this.pass = false
    },
    handleFileEnlarge (_url) {
      // 放大图片
      console.log(_url)
      if (_url) {
        this.enlargeImage = _url
        this.isEnlargeImage = !this.isEnlargeImage
      }
    },
    handleFileName (file, i) {
      // 修改文件名
      console.log(JSON.stringify(file))
      let that = this
      this.$prompt('请输入新文件名：', '提示：', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
      .then(({ value }) => {
        console.log(value)
        if (!value) {
          return false
        }
        that.imageList[i].name = value
        this.$http({
          url: this.$http.requestUrl('/common/attachment/updateFileName'),
          method: 'post',
          data: this.$http.requestData({
            'id': file.id,
            'fileName': value
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success('操作成功')
          } else {
            this.$message.error(data.msg)
          }
        })
      })
      .catch(() => {})
    },
    handleFileRemove (file, i) {
      // 删除图片
      console.log(JSON.stringify(file))
      if (!file.url) {
        return false
      }
      let that = this
      this.$confirm('是否删除此附件？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.$http({
          url: this.$http.requestUrl('/common/attachment/delete'),
          method: 'post',
          data: file.id
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功',
              onClose: () => {
                that.imageList.splice(i, 1)
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
      .catch(meg => console.log(meg))
    }
  }
}
</script>

<style>
* {
    box-sizing: border-box;
}
.img-list {
    overflow: hidden;
    width: 100%;
}
.img-list .img-content {
    float: left;
    text-align: left;
    position: relative;
    display: inline-block;
    width: 200px;
    height: 270px;
    padding: 5px;
    margin: 5px 20px 20px 0;
    border: 1px solid #d1dbe5;
    border-radius: 4px;
    transition: all 0.3s;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.img-list .img-upload {
    float: left;
    width: 200px;
    height: 270px;
    display: table;
    text-align: center;
}
.img-list .uploader {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}
.img-list .img-progress {
    text-align: center;
    padding-top: 50px;
}
.img-list .img-content img {
    display: block;
    width: 100%;
    height: 190px;
    margin: 0 auto;
    border-radius: 4px;
}
.img-list .img-content .name {
    margin-top: 10px;
}
.img-list .img-content .name > div {
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 25px;
    line-height: 25px;
}
.img-list .img-content:hover .del,
.img-list .img-content:hover .layer {
    opacity: 1;
}
.img-list .img-content .del,
.img-list .img-content .layer {
    opacity: 0;
    transition: all 0.3s;
}
.img-list .img-content .del {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #8492a6;
    cursor: pointer;
    font-size: 1.1em;
}
.img-list .img-content .layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200px;
    color: #fff;
    text-align: center;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.4);
}
.img-list .img-content .layer i {
    font-size: 1.6em;
    margin-top: 80px;
}
</style>
